import Vue from 'vue'
import Vuex from 'vuex'
import saveInLocal from './plugin/saveInLocal.js'

Vue.use(Vuex)

import { getGoodsInfo, getSellerInfo, getRatingsInfo } from '@/api'

export default new Vuex.Store({
  state: {
    selectFoods: [],
    goods: [],
    seller: {},
    ratings: [],
    balls: [
      {show: false},
      {show: false},
      {show: false},
      {show: false},
      {show: false}
    ],
    dropBalls: [],
    listShow: false
  },

  getters: {
    totalPrice: (state) => {
      let total = 0
      state.selectFoods.forEach(item => {
        total += item.count * item.price
      })
      return total
    },
    totalCount: (state) => {
      let total = 0
      state.selectFoods.forEach(item => {
        total += item.count
      })
      return total
    }
  },

  mutations: {
    SET_GOODS (state, value) {
      state.goods = value
    },
    SET_SELLER (state, value) {
      state.seller = value
    },
    SET_RATINGS (state, value) {
      state.ratings = value
    },
    SET_COUNT (state, value) {
      let bo = state.selectFoods.some(item => item.name === value.food.name)
      if (!state.selectFoods.length) {
        state.selectFoods.push(value.food)
        Vue.set(value.food, 'count', 1)
      } else {
        if (bo) {
          value.food.count ++
        } else {
          state.selectFoods.push(value.food)
          Vue.set(value.food, 'count', 1)
        }
      }
    },
    DEC_COUNT (state, value) {
      value.food.count--
      if (value.food.count === 0) {
        for (let i = 0; i < state.selectFoods.length; i++) {
          if (state.selectFoods[i].name === value.food.name) {
            state.selectFoods.splice(i, 1)
          }
        }
      }
    },
    EMPTY (state) {
      state.selectFoods.forEach(item => item.count = 0)
      state.selectFoods = []
      state.listShow = false
    },
    CHANGE_SHOW (state) {
      state.listShow = !state.listShow
    },
    //购物车小球起始drop
    DROP (state, el) {
      //触发一次事件就会将所有小球进行遍历
      for (let i = 0; i < state.balls.length; i++) {
        let ball = state.balls[i]
        if (!ball.show) { //将false的小球放到dropBalls
          ball.show = true
          ball.el = el  //设置小球的el属性为一个dom对象
          state.dropBalls.push(ball)
          return
        }
      }

    },
    // 首先触发afterDrop是最先落的小球，所以把第一项也就是先落的小球重置
    SHIFT_BALL (state) {
      let ball = state.dropBalls.shift()  // 删除dropBalls第一项，并返回此项
      if (ball) {
        ball.show = false
      }
    }
  },

  actions: {
    getGoodsInfos ({ commit }) {
      getGoodsInfo().then(res => {
        const data = res.data
        commit('SET_GOODS', data.goods)
      })
    },
    getSellerInfos ({ commit }) {
      getSellerInfo().then(res => {
        const data = res.data
        commit('SET_SELLER', data.seller)
      })
    },
    getRatingsInfos ({ commit }) {
      getRatingsInfo().then(res => {
        const data = res.data
        commit('SET_RATINGS', data.ratings)
      })
    }
  },

  plugins: [ saveInLocal ]
})
